<section>
    <h1 class="blue"><i class="ace-icon fa fa-file-o grey"></i> Mustache Files</h1>
    <hr/>

    <div class="alert alert-info">
        <button class="close" data-dismiss="alert"><i class="ace-icon fa fa-times"></i></button>
        <b>Please note that:</b>

        <div class="space-4"></div>
        <i class="fa fa-hand-o-right"></i>
        You don't need to use Mustache templates in your application.

        <div class="space-8"></div>
        <i class="fa fa-hand-o-right"></i>
        If you need any info about any part of the template,
        you can refer to its documentation or use on-page help.

        <div class="space-8"></div>
        <i class="fa fa-hand-o-right"></i>
        But you can read the following for more info such as the purpose of using a template engine
        and how it may help you find your way around Ace admin template better.

        <div class="hr hr-12"></div>
        If you think there's something I'm missing here or more info is needed, just let me know.
    </div>

    <div class="hr hr-double hr32"></div>

    <div class="help-content">
        <h3 class="info-title smaller">1. What is it?</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Probably you are already using a template system in your application.
                    <p>
                        It may be natively supported by your framework of choice or may be an external library.

                    <p>
                        For example PHP Smarty or Ruby's ERB are such template engines.

                    <p>
                        The main purpose of using a template system is to separate presentation from application logic
                </li>

                <li>
                    <i class="fa fa-lightbulb-o orange bigger-125"></i>
                    But Ace admin's demo pages are static HTML and not an application.
                    <br/>
                    Therefore the main reason for using Mustache templates is to create
                    demo pages which have similar layout and looks but different content.
                    <div class="space-6"></div>
                    In other words, we use templates to break down large HTML pages into smaller parts that can be
                    easily modified and maintained.
                </li>

                <li>
                    Mustache is a templating system with implementations
                    available in many languages including Javascript, PHP, Ruby, etc.

                    <div class="space-6"></div>
                    For an overview you can see this page: <a href="http://mustache.github.io/">http://mustache.github.io/mustache.5.html</a>

                    <div class="space-6"></div>

                    I'm using it to create the HTML output.
                    <br/>
                    I've also overridden the partial template loader mechanism
                    to automatically load partial templates as needed.
                </li>

                <li>
                    You can view or edit <b>Mustache</b>(.mustache) files using your favorite text or HTML editor
                    and enable HTML syntax highlighting for it.
                    <p>
                        You can also click on each file name provided in the following sections and view its content
                        inside your browser.
                </li>
            </ul>
        </div>

        <h3 class="info-title smaller">2. What does it contain?</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Let's start with the following file which is the default layout file:
                    <br/>
                    <i>(you can click on in to view its content)</i>
                    <br/>
                    <code data-open-file="html" class="open-file">mustache/app/views/layouts/default.mustache</code>

                    <div class="space-6"></div>
                    As you can see it contains some HTML code and some special tags (Mustache tags).
                    <div class="space-4"></div>
                    There are 6 kinds of Mustache tags used here:
                    <ol class="spaced2">
                        <li>
                            Variables that are used for printing a piece of data
                            such as <code>{{page.title}}</code> or <code>{{site.title}}</code>
                        </li>

                        <li>
                            Partial template tags that start with a <code>&gt;</code> such as <code>{{&gt;
                            layout.sidebar}}</code>.
                            <div class="space-6"></div>
                            The engine tries to load current layout's <code>sidebar</code> template file.
                            <br/>
                            It starts by looking inside
                            <br/>
                            <code>mustache/app/views/layouts/partials/<b class="bigger-110 blue">default</b></code>
                            <br/>
                            folder and if not found, it will look for it inside
                            <code>mustache/app/views/layouts/partials/<b class="bigger-110 blue">_shared</b></code>

                            <div class="space-6"></div>
                            In our case, sidebar's HTML code is shared between <b>default</b> & <b>empty</b> layouts.
                            So it's located at:
                            <br/>
                            <code data-open-file="html" class="open-file">mustache/app/views/layouts/partials/<b
                                    class="bigger-110 blue">_shared</b>/sidebar.mustache</code>
                        </li>

                        <li>
                            Section tags that print a piece of code or data if a variable is defined
                            and is not false/null.
                            <br/>
                            For example inside our sidebar <code data-open-file="html" class="open-file">mustache/app/views/layouts/partials/_shared/sidebar.mustache</code>
                            there is:
<pre>
&lt;div id="sidebar" class="sidebar
<span class="light-blue">{{#page.horizontal-menu}}</span><span class="light-green"> h-sidebar</span><span
        class="light-blue">{{/page.horizontal-menu}}</span>
</pre>
                            The <code><span class="green">h-sidebar</span></code>
                            class will be printed only if a <code>page.horizontal-menu</code> variable is defined and is
                            not false or null.
                        </li>

                        <li>
                            Inverted Section tags that print a piece of code or data if a variable is not defined
                            or is false/null.
                            Again in our <code>sidebar</code> mustache file we have: <br/>
<pre>
<span class="light-red">{{^page.side_menu_collapsible}}</span>
 <span class="light-red">{{^page.responsive_style_2}}</span>
  <span class="light-green">responsive</span>
 <span class="light-red">{{/page.responsive_style_2}}</span>
<span class="light-red">{{/page.side_menu_collapsible}}</span>
</pre>

                            The <code><span class="green">responsive</span></code> class will be printed
                            only if <code>page.side_menu_collapsible</code> and <code>page.responsive_style_2</code>
                            variables are NOT defined or are false/null.
                        </li>

                        <li>
                            Non-Empty List tags are used to print a list of items when the variable is a non-empty
                            array:
<pre>
<span class="light-blue">{{#conversation_list}}</span>
  &lt;h3&gt;<span class="light-green">{{title}}</span>&lt;/h3&gt;
  &lt;div class="content"&gt;<span class="light-green">{{content}}</span>&lt;/div&gt;
  &lt;div class="time"&gt;<span class="light-green">{{time}}</span>&lt;/div&gt;
<span class="light-blue">{{/conversation_list}}</span>
</pre>
                        </li>


                        <li>
                            Comment tags such as <code><span class="green">{{! This is a comment}}</span></code>. These
                            are ignored and won't be converted to HTML comments.
                        </li>
                    </ol>

                </li>

                <li>
                    In our case variables and options come under some different names:
                    <ol class="spaced2">
                        <li>
                            <code>site.*</code> for example <code>site.title</code>
                        </li>
                        <li>
                            <code>layout.*</code> for example <code>layout.sidebar_items</code>
                        </li>
                        <li>
                            <code>page.*</code> for example <code>page.title</code> or <code>page.content</code>
                        </li>
                        <li>
                            And other variables such as <code>path.assets</code>, etc.
                        </li>
                    </ol>


                    For example <code>site.remote_jquery</code> inside
                    <code data-open-file="html" class="open-file">mustache/app/views/layouts/partials/_shared/_template/jquery.mustache</code>
                    is an option that specifies whether we should
                    use remote (CDN) jquery files or not when generating our HTML output.
                    <div class="space-6"></div>
                    Following <code>Data Files</code> section describes where data is loaded from.
                </li>
            </ul>
        </div>

        <h3 class="info-title smaller">3. Templates Files</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Our layout files are inside <code>mustache/app/views/layouts</code> folder which includes:
                    <br/>
                    <i>(Move mouse over each item to see full path)</i>
                    <ul>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/</span>default.mustache</code>
                            <br/>
                            Default layout file for all pages except for login and empty.html file.
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/</span>login.mustache</code>
                            <br/>
                            Login page layout file.
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/</span>empty.mustache</code>
                            <br/>
                            Empty page's layout file.
                            It is similar to default layout but the partials are slightly different
                            so a separate file is used.
                        </li>
                    </ul>
                    <br/>
                    Layout partials are inside <code>mustache/app/views/layouts/partials</code> folder.
                    <br/>
                    Some of partials are:
                    <ul>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>sidebar.mustache</code>
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>sidebar/item.mustache</code>
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>sidebar/shortcuts.mustache</code>
                        </li>
                    </ul>

                    <ul>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar.mustache</code>
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar/topmenu.mustache</code>
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar/toggle_buttons.mustache</code>
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar/messages.mustache</code>
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar/notifications.mustache</code>
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar/tasks.mustache</code>
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar/tabbed_user_notifications.mustache</code>
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/</span>default/navbar/user_menu.mustache</code>
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/</span>empty/navbar/user_menu.mustache</code>
                        </li>
                        <li class="space-8"></li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>settings.mustache</code>
                        </li>

                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/</span>default/breadcrumbs.mustache</code>
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/</span>default/footer.mustache</code>
                        </li>

                        <li class="hr hr-8"></li>

                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>_template/jquery.mustache</code>
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>_template/bootstrap.mustache</code>
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>_template/fonts.mustache</code>
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>_template/fontawesome.mustache</code>
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>_template/scripts.mustache</code>
                        </li>
                        <li>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>_template/styles.mustache</code>
                        </li>
                    </ul>
                </li>

                <li>
                    Page files are inside <code>mustache/app/views/pages</code>.
                    <br/>
                    A few samples pages include:
                    <br/>
                    <ul class="spaced2">
                        <li>
                            Home (dashboard) page:
                            <br/>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/</span>index.mustache</code>
                            <br/>
                            And its partials are:
                            <ul>
                                <li>
                                    <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/index/</span>conversations.mustache</code>
                                </li>
                                <li>
                                    <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/index/</span>comments.mustache</code>
                                </li>
                                <li>
                                    <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/index/</span>tasks.mustache</code>
                                </li>
                                <li>
                                    <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/index/</span>members.mustache</code>
                                </li>
                                <li>
                                    <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/index/</span>domains.mustache</code>
                                </li>
                                <li>
                                    <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/index/</span>infobox.mustache</code>
                                </li>
                            </ul>
                        </li>
                        <li>
                            Login page:
                            <br/>
                            <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/</span>login.mustache</code>
                            <br/>
                            which is split into 3 partials:
                            <br/>
                            <ul>
                                <li>
                                    <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/login/</span>login_box.mustache</code>
                                </li>
                                <li>
                                    <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/login/</span>forgot_box.mustache</code>
                                </li>
                                <li>
                                    <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/login/</span>signup_box.mustache</code>
                                </li>
                            </ul>
                        </li>
                        <li>
                            And other pages at <code>mustache/app/views/pages</code>.
                        </li>
                    </ul>
                </li>


                <li>
                    Page assets (inline scripts and styles) are inside <code>mustache/app/views/assets</code>.
                    <br/>
                    Putting them in separate files makes it easier to read and edit.
                    <br/>
                    In some (server side programming language) frameworks,
                    this is usually done by registering files and snippets during application run
                    and inserting them in the output at the right spot.

                    <br/>
                    <ul class="spaced2">
                        <li>
                            Script of each page is inside <code>mustache/app/views/assets/scripts</code>.
                            <br/>
                            A few samples are:
                            <br/>
                            <code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/</span>scripts/index.js</code>
                            <br/>
                            <code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/</span>scripts/tables.js</code>
                            <br/>
                            <code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/</span>scripts/profile.js</code>
                            <br/>
                            These scripts are used in relevant pages and can server as a basic example for most plugins
                            and functionality.
                        </li>
                        <li>
                            Some pages may have additional extra CSS rules that are used for demo pages only.
                            <br/>
                            Currently there is:
                            <br/>
                            <code data-open-file="css" class="open-file"><span class="brief-show">mustache/app/views/assets/</span>styles/elements.css</code>
                            <br/>
                            and
                            <br/>
                            <code data-open-file="css" class="open-file"><span class="brief-show">mustache/app/views/assets/</span>styles/grid.css</code>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>


        <h3 class="info-title smaller">4. Data Files</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    In your application you are probably using a database engine to save/restore your data.
                    <br/>
                    For Ace admin, as there is not any dynamic functionality in demo pages, I have used
                    simple text files with json and csv data format.
                    <br/>
                    They are located here:
                    <code>mustache/app/data</code>
                </li>

                <li>
                    In our case there are 3 types of data:
                    <ol class="spaced2">
                        <li>
                            <b>Layout data</b> inside <code>mustache/app/data/layouts</code> folder.
                            <br/>
                            For example:
                            <br/>
                            <code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/layouts/partials/default/</span>navbar_messages.json</code>
                            <br/>
                            <code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/layouts/partials/default/</span>navbar_notifications.json</code>
                            <br/>
                            <code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/layouts/partials/default/</span>navbar_tasks.json</code>
                            <br/>
                            <code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/layouts/partials/</span>default/sidebar_items.json</code>
                            <br/>
                            <code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/layouts/partials/</span>empty/sidebar_items.json</code>
                        </li>

                        <li>
                            <b>Page data and options</b> inside <code>mustache/app/data/pages</code> folder.
                            <br/>
                            For example:
                            <br/>
                            <code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/pages/</span>index.json</code>
                            <br/>
                            <code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/pages/</span>top-menu.json</code>
                            <br/>
                            You can see that <code>top-menu.json</code> has <code>horizontal-menu</code> and <code>top-menu</code>
                            options enabled.

                            <div class="space-8"></div>

                            Also each page's partial data is inside <code>mustache/app/data/pages/partials</code>
                            folder.
                            <br/>
                            For example dashboard's conversations or profile activities:
                            <br/>
                            <code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/pages/partials/</span>index/conversations.json</code>
                            <br/>
                            <code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/pages/partials/</span>profile/activities.json</code>
                        </li>

                        <li>
                            <b>Site data and options</b> inside <code>mustache/app/data/common</code> folder.
                            <br/>
                            For example
                            <br/>
                            <code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/common/</span>site.json</code>
                            <br/>
                            contains some general site variables and options.

                            <div class="space-6"></div>

                            When using <a href="#plugins/tools.node-js" class="help-more">Node.js</a> to produce the
                            output, it's possible to override these values using command line arguments.
                            <i>(There is more info on this in the following section)</i>

                            <div class="hr hr-12"></div>

                            <code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/common/</span>script-mapping.json</code>
                            <br/>
                            <code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/common/</span>style-mapping.json</code>
                            <br/>
                            files contain a list of 3rd party names and their relevant Javascript or CSS file.
                            <br/>
                            This way a file name can be modified and the changes will be reflected
                            on all pages using that script or style in future updates.
                        </li>
                    </ol>
                </li>
            </ul>
        </div>


        <h3 class="info-title smaller">5. Compiling & Browsing</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Demo page's are generated using a Javascript Mustache compiler(both Hogan.js or Mustache.js are
                    possible).
                    <br/>
                    You can go to <code>mustache/js</code> directory and rebuild HTML files using the following command:
                    <code>node index.js</code>
                    <br/>
                    The output will be put inside <code>output</code> folder by default.

                    <div class="space-10"></div>
                    There are also a few options you can use:
                    <ul class="spaced2">
                        <li>
                            <b>--engine</b>=mustache|hogan
                            <br/>
                            Default is hogan
                        </li>
                        <li>
                            <b>--output_folder</b>="../some-folder"
                            <br/>
                            Default is <i>output</i>
                        </li>
                        <li>
                            And site variables & options of the following file can be overriden via command line
                            arguments:
                            <br/>
                            <code data-open-file="json" class="open-file">mustache/app/data/common/site.json</code>
                            <br/>
                            For example: <b>--remote_jquery</b>=true
                        </li>
                    </ul>
                </li>
                <li>
                    There is also a PHP version using PHP Mustache compiler which I use during development.
                    <br/>
                    If you have PHP installed, you can access it here:
                    <a href="../mustache/php/">http://path_to_ace/mustache/php/</a>
                    <br/>
                    And
                    <a href="../mustache/php/ajax.php">http://path_to_ace/mustache/php/ajax.php</a>
                    for ajax version.
                </li>

                <li>
                    Also please note that
                    I have overridden a function of <b>Hogan.js</b>
                    and </b>Mustache.js</b> compiler to automatically load a partial template
                    as needed without preloading them.
                    <br/>
                    They are located at
                    <code data-open-file="javascript" class="open-file">mustache/js/classes/autoload-hogan.js</code>
                    and
                    <code data-open-file="javascript" class="open-file">mustache/js/classes/autoload-mustache.js</code>
                </li>
            </ul>
        </div>

    </div>
</section>